<template>
  <div class="planningCreateBaseInfo" v-bind:class="bigScreen">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      :disabled="formDisabled"
      label-width="80px"
      label-position="left"
      size="small"
    >
      <div class="text item">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品信息</span>
          </div>
          <div class="text item">
            <el-row :gutter="30">
              <el-col :xl="6" :lg="12" :md="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="formData.name"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="系列名称">
                  <el-input v-model="formData.seriesName"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="品牌" prop="brand">
                  <el-input v-model="formData.brand"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="类别">
                  <el-select
                    clearable
                    v-model="formData.category"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in categoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="产品代号" prop="productCode">
                  <el-input v-model="formData.productCode"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="产品型号">
                  <el-select
                    v-model="formData.productModel"
                    multiple
                    filterable
                    allow-create
                    placeholder="请输入型号"
                    default-first-option
                  >
                    <el-tag>输入后按回车即可输入下一个</el-tag>
                    <el-option
                      v-for="item in modelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="产品定位">
                  <el-select
                    clearable
                    v-model="formData.position"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in positionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="销售渠道" class="distribution_channel">
                  <el-cascader
                    clearable
                    style="width: 100%"
                    v-model="formData.distribution_channel"
                    :options="formData.channel_options"
                    :props="{ expandTrigger: 'hover' }"
                  >
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="能效等级">
                  <el-select
                    clearable
                    v-model="formData.energyLevel"
                    placeholder="请选择能效等级"
                  >
                    <el-option
                      v-for="item in energyOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="开发平台">
                  <el-input v-model="formData.developmentPlatform"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="外观颜色">
                  <el-input v-model="formData.color"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="外观材质">
                  <el-select
                    clearable
                    v-model="formData.material"
                    placeholder="请选择外观材质"
                  >
                    <el-option
                      v-for="item in materialOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="出风方式">
                  <el-select
                    clearable
                    v-model="formData.windType"
                    placeholder="请选择出风方式"
                  >
                    <el-option
                      v-for="item in windOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="基础机型">
                  <el-input v-model="formData.base"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="项目类型">
                  <el-select
                    clearable
                    v-model="formData.type"
                    placeholder="请选择项目类型"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="任务来源">
                  <el-select
                    clearable
                    v-model="formData.origin"
                    placeholder="请选择任务来源"
                  >
                    <el-option
                      v-for="item in originOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">功能信息</el-divider>
            <el-row :gutter="20">
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="舒适功能">
                  <el-select
                    v-model="formData.comfortFunc"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请输入功能"
                  >
                    <el-tag>
                      选项中没有的功能可以键盘输入，输入后按回车即可输入下一个
                    </el-tag>
                    <el-option
                      v-for="item in comfortFuncOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="健康功能">
                  <el-select
                    v-model="formData.healthFunc"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请输入功能"
                  >
                    <el-tag>
                      选项中没有的功能可以键盘输入，输入后按回车即可输入下一个
                    </el-tag>
                    <el-option
                      v-for="item in formData.healthOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="智能功能">
                  <el-select
                    v-model="formData.smartFunc"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请输入功能"
                  >
                    <el-tag>
                      选项中没有的功能可以键盘输入，输入后按回车即可输入下一个
                    </el-tag>
                    <el-option
                      v-for="item in formData.smartOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="便捷功能">
                  <el-select
                    v-model="formData.convenientFunc"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请输入功能"
                  >
                    <el-tag>
                      选项中没有的功能可以键盘输入，输入后按回车即可输入下一个
                    </el-tag>
                    <el-option
                      v-for="item in formData.convenientOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :lg="12" :md="24" :xs="24">
                <el-form-item class="change__point" label="其它功能">
                  <el-input
                    v-model="formData.otherFunc"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :lg="12" :md="24" :xs="24">
                <el-form-item class="change__point" label="较基础机型变更点">
                  <el-input
                    v-model="formData.changePoint"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <hr />
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>成员信息</span>
          </div>
          <div class="text item">
            <el-divider content-position="left"
              >责任科室信息，选择规格后才可以编辑对应的责任科室</el-divider
            >
            <el-row>
              <el-col :lg="12" :md="24" :xs="24">
                <el-form-item label="产品规格">
                  <el-checkbox-group
                    v-model="formData.specification"
                    @change="handleCheckBoxGroupChange"
                  >
                    <el-checkbox
                      v-for="item in projectOffices"
                      :key="item.id"
                      :label="item.name"
                      @change="(checked) => handleCheckBoxChange(checked, item)"
                    >
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :lg="6"
                :md="12"
                v-for="item in projectOffices"
                :key="item.name"
              >
                <el-form-item
                  :label="'规格' + item.name + ' 责任科室'"
                  label-width="180px"
                  class="projectOffices"
                >
                  <el-select
                    v-model="formData['projectOffice' + item.id]"
                    clearable
                    placeholder="请选择"
                    :disabled="item.disabled"
                  >
                    <el-option
                      v-for="item in projectOfficeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left">负责人信息</el-divider>
            <el-row :gutter="40">
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item
                  label="项目负责人"
                  label-width="180px"
                  prop="project_leader"
                >
                  <el-input v-model="formData.project_leader"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item
                  label="产品策划负责人"
                  label-width="180px"
                  prop="plan_leader"
                >
                  <el-input v-model="formData.plan_leader"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="内机控制器负责人" label-width="180px">
                  <el-input v-model="formData.inside_leader"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="外机控制器负责人" label-width="180px">
                  <el-input v-model="formData.out_leader"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="项目负责人主任" label-width="180px">
                  <el-input v-model="formData.project_director"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item
                  label="产品策划负责人主任"
                  class="distribution_channel"
                  label-width="180px"
                >
                  <el-input v-model="formData.plan_director"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="内机负责人主任" label-width="180px">
                  <el-input v-model="formData.inside_director"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="外机负责人主任" label-width="180px">
                  <el-input v-model="formData.out_director"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="遥控器负责人" label-width="180px">
                  <el-input v-model="formData.remote_leader"> </el-input>
                </el-form-item>
              </el-col>

              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="智能板块负责人" label-width="180px">
                  <el-input v-model="formData.smart_leader"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="印刷板块负责人" label-width="180px">
                  <el-input v-model="formData.print_leader"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="电器板块负责人" label-width="180px">
                  <el-input v-model="formData.electric_leader"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="遥控器负责人主任" label-width="180px">
                  <el-input v-model="formData.remote_director"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="智能板块负责人主任" label-width="180px">
                  <el-input v-model="formData.smart_director"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="印刷负责人主任" label-width="180px">
                  <el-input v-model="formData.print_director"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="电器板块负责人主任" label-width="180px">
                  <el-input v-model="formData.electric_director"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-form>
  </div>
</template>

<script>
import SuperFormMixin from "@/mixins/super-form-mixin";
import { SelectData } from "@/mixins/select-data.js";
import { getRequest } from "@/api/api";
import { postRequest } from "@/api/api";
export default {
  name: "PlanningCreateBaseInfo",
  mixins: [SuperFormMixin, SelectData],
  data() {
    return {
      formLabelWidth: "120px",
      isBig: true,
      isSmall: false,
      createBrand: {
        name: "",
        description: "",
      },
      dialogCreateBrandVisible: false,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        productCode: [
          {
            required: true,
            message: "请输入产品代号",
            trigger: "blur",
          },
        ],
        project_office: [
          { required: true, message: "请选择责任科室", trigger: "change" },
        ],
        plan_leader: [
          { required: true, message: "请输入策划负责人", trigger: "blur" },
        ],
        project_leader: [
          { required: true, message: "请输入项目负责人", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    handleCreateBrand() {
      this.dialogCreateBrandVisible = false;
      this.formData.brandOptions.push({
        label: this.createBrand.name,
        value: this.createBrand.name,
      });
      console.log(this.formData.brand);
      let params = {
        name: this.createBrand.name,
        description: this.createBrand.description,
      };
      postRequest("/brand/insert", params);
      this.createBrand = {};
    },
    handleChange() {
      console.log(this.specification);
    },
    handleCheckBoxGroupChange(val) {
      this.$forceUpdate;
    },
    handleCheckBoxChange(val, item) {
      if (val == false) {
        this.projectOffices[item.id].disabled = true;
        this.formData["projectOffice" + item.id] = "";
      } else if (val == true) {
        this.projectOffices[item.id].disabled = false;
      }
      console.log(this.formData);
      console.log("x", this.projectOffices[0]);
      console.log(item);
      console.log(val);
    },
  },
  mounted() {
    // console.log("form1:", this.rules);
  },
};
</script>

<style scoped>
.planningCreateBaseInfo {
  /* width: 90%; */
  margin-bottom: 20px;
  /* border: solid gray 2px; */
}
.el-col {
  margin: 5px 0 5px 0;
}
.bigScreen {
  width: 90%;
}
.smallScreen {
  width: 100%;
}

.projectOffices {
  margin: 0px 15px 15px 0px;
}

.planningCreateBaseInfo /deep/ .el-select {
  width: 100%;
}
.item {
  margin-bottom: 18px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix span {
  float: left;
  font-size: 16px;
}
</style>